import React, { useContext, useMemo } from 'react';
import { ConractControllerContext } from '../common';
import { Tabs } from 'antd';
import Cls from 'classnames';
import { DetailInfoCenterViewMainOA } from './DetailInfoCenterViewMainOA';
import { DetailInfoCenterViewModifyOA } from './DetailInfoCenterViewModifyOA';
import { DetailInfoCenterViewBreakOA } from './DetailInfoCenterViewBreakOA';
import stylesOA from '../common/stylesOA.less';
import { DetailCheckListViewOA } from './DetailCheckListViewOA';
import { DetailCenterFlowImageView } from './DetailCenterFlowImageView';
// import { DetailInfoCenterViewApplyOA } from './DetailInfoCenterViewApplyOA';
import { DetailInfoCenterViewMaterialOA } from './DetailInfoCenterViewMaterialOA';
import { DetailInfoCenterViewPaymentOA } from './DetailInfoCenterViewPaymentOA';
export const DetailInfoCenterViewOA: React.FC = () => {
  /** 获取上下文 */
  const { styleFixCls, contractDetailInfo, locationState } = useContext(ConractControllerContext);

  // /** 保存tab选中KEY */
  // const [tabsPaneKeyCheck, setTabsPaneKeyCheck] = useState<string>("contract-apply")

  // useEffect(() => {
  //   if (locationState?.jumpType == "pageRouterOA") {
  //     setTabsPaneKeyCheck(contractDetailInfo?.id || '1')
  //   }
  // }, [locationState?.jumpType, contractDetailInfo])

  /** tabs的子页面 */
  const tabsItemMemo = useMemo(() => {
    let itemConfig: any[] = [
      // {
      //   label: '合同申请',
      //   key: 'contract-apply',
      //   children: <DetailInfoCenterViewApplyOA />,
      // },
      {
        label: '申请单',
        key: contractDetailInfo?.id || '1',
        children:
          contractDetailInfo?.changeWay == 0 ? (
            <DetailInfoCenterViewModifyOA />
          ) : contractDetailInfo?.changeWay == 1 ? (
            <DetailInfoCenterViewBreakOA />
          ) : (
            <DetailInfoCenterViewMainOA />
          ),
      },
      {
        label: '办理意见',
        key: 'oaDetail-flowHanle',
        children: <DetailCheckListViewOA />,
      },
      {
        label: '流程跟踪',
        key: contractDetailInfo?.workflowID || '3',
        children: <DetailCenterFlowImageView />,
      },
    ];

    if (contractDetailInfo?.changeWay != 0 && contractDetailInfo?.changeWay != 1) {
      itemConfig.splice(
        1,
        0,
        {
          label: '履约关键节点',
          key: 'contract-payment',
          children: <DetailInfoCenterViewPaymentOA />,
        },
        {
          label: '货物服务清单',
          key: 'contract-materia',
          children: <DetailInfoCenterViewMaterialOA />,
        },
      );
    }

    return contractDetailInfo?.id ? itemConfig : [];
  }, [contractDetailInfo]);

  return (
    <div className={Cls(`${styleFixCls}infoViewOA-centerBox`, stylesOA['tabsStyle'], 'stylesOA-theme')}>
      <Tabs
        items={tabsItemMemo}
        type="card"
        destroyInactiveTabPane={true}
        // activeKey={tabsPaneKeyCheck}
        // onChange={(activeKey: string) => {
        //   if (tabsPaneKeyCheck != activeKey) {
        //     setTabsPaneKeyCheck(activeKey)
        //   }
        // }}
      />
    </div>
  );
};
